<template>
  <div class="savingsPlan">
    <!-- 顶部 -->
    <div class="main-t">
      <!-- 导航栏 -->
      <div class="banner">
        <van-nav-bar>
          <template #left>
            <van-icon name="arrow-left" color="black" @click="back" />
          </template>
          <template #title>
            <van-tabs v-model:active="active" @click-tab="changeCategoryList($event)" type="card" color="rgb(46,53,72)">
              <van-tab title="进行中"></van-tab>
              <van-tab title="归档"></van-tab>
            </van-tabs>
          </template>
        </van-nav-bar>
      </div>
    </div>
    <!-- 中部 -->
    <div class="main-c">
      <!-- 存钱计划面板 -->
      <div class="savingsPlan-panel panel">
        <div class="savingsPlan-main">
          <div class="savingsPlan-icon">
            <van-image :src="icon_01" width="40" height="40"></van-image>
          </div>
          <div class="savingsPlan-name">存钱计划</div>
        </div>
        <div class="savingsPlan-tag">
          我们推出存钱方法工具，希望自己能够坚持，存钱是长坡厚雪逐渐积累的过程，有工具固然好，最重要也需要自己自律
        </div>
      </div>
      <!-- 存钱计划进度 -->
      <div class="savingsPlan-progress panel">
        <div class="progress-t">
          <div class="progress-savings">已存:{{ spEd.toFixed(1) }}</div>
          <div class="progress-surplus">剩余:{{ spSurplus.toFixed(1) }}</div>
        </div>
        <div class="progress-b">
          <div class="progress-bar">
            <div class="progress-bar-achieve" :style="{ 'width': spAchieve + '%' }"></div>
          </div>
          <div class="progress-text">{{ spAchieve.toFixed(2) }}%</div>
        </div>
      </div>
      <!-- 存钱计划列表 -->
      <div class="savingsPlan-list">
        <div class="savingsPlan-item panel">
          <div class="savingsPlan-item-t">
            <div class="savingsPlan-item-title">
              <div class="panel-title-icon"></div>
              定额存钱法
            </div>
            <div class="savingsPlan-item-edit">编辑</div>
          </div>
          <div class="savingsPlan-item-c">
            <div class="savingsPlan-item-info">
              <div class="savingsPlan-item-emoji savingsPlan-icon">🤓</div>
              <div class="savingsPlan-item-name">
                <div class="text">存钱计划1</div>
                <div class="model">定额模式</div>
              </div>
            </div>
            <div class="savingsPlan-item-count">
              <div class="savingsPlan-item-count-total">￥200.00</div>
              <div class="savingsPlan-item-count-ed">已存入:100.0</div>
            </div>
          </div>
          <div class="savingsPlan-item-b">
            <div class="savingsPlan-item-rule rule-active">执行1次结束</div>
            <div class="savingsPlan-item-rule">每1天</div>
            <div class="savingsPlan-item-rule">已执行0次</div>
          </div>
        </div>
        <div class="noting" v-if="false">
          <Nothing :tag="nothingTag" />
        </div>
      </div>
    </div>
    <!-- 底部按钮 -->
    <div class="main-b">
      <div class="fixedBtn" @click="addSavingPlan()">添加</div>
    </div>
  </div>
</template>

<script setup lang="ts" name="SavingsPlan">
// 存钱计划主页面
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import icon_01 from '@/icon/068_存钱计划.svg';
import Nothing from '@/components/Nothing.vue'

let active = ref(0)
let nothingTag = ref('没有发现存钱计划哦，试着添加一个')
const router = useRouter()
let spTotal = ref(100) // 总金额
let spEd = ref(5) // 已存金额
let spAchieve = computed({ // 已完成进度 / 进度条宽度
  get() {
    return (spEd.value / spTotal.value) * 100
  },
  set() { }
})
let spSurplus = computed({ // 剩余金额
  get() {
    return spTotal.value - spEd.value
  },
  set() { }
})

// 返回上一级
function back() {
  router.go(-1)
}

// 分页
function changeCategoryList(value: any) {
  console.log(value)
}

// 添加一条存钱计划
function addSavingPlan() {
  console.log('添加一条存钱计划')
  router.push('/addSavingsPlan')
}

</script>

<style scoped lang="less">
@gabelMargin : 20px; // 全局margin
@gabelBgColor : rgb(181, 202, 161);
@garyFontColor : rgb(125, 125, 125);
@grayBgColor: rgb(240, 240, 240);

.savingsPlan {
  position: relative;
  height: 100vh;
  width: 100%;
}

.main-c {
  margin: @gabelMargin;

  .savingsPlan-panel {
    .savingsPlan-main {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .savingsPlan-name {
        font-size: 32px;
        font-weight: 600;
      }
    }

    .savingsPlan-tag {
      font-size: 25px;
      color: @garyFontColor;
    }
  }

  .savingsPlan-progress {
    font-size: 30px;

    .progress-t {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .progress-b {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;

      .progress-bar {
        width: 81%;
        height: 15px;
        border-radius: 10px;
        background-color: rgb(241, 241, 241);
        overflow: hidden;

        .progress-bar-achieve {
          height: 100%;
          width: 0%;
          background-color: @gabelBgColor;
        }
      }

    }
  }

  .savingsPlan-list {
    font-size: 33px;

    .savingsPlan-item {
      .savingsPlan-item-t {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .savingsPlan-item-title {
          display: flex;
          align-items: center;
        }

        .savingsPlan-item-edit {
          background-color: rgb(234, 234, 234);
          color: @garyFontColor;
          padding: 10px;
          font-size: 23px;
          border-radius: 20px;
        }
      }

      .savingsPlan-item-c {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 15px 0;

        .savingsPlan-item-info{
          display: flex;
          align-items: center;
        }

        .savingsPlan-item-emoji {
        }

        .savingsPlan-item-name {
          .model {
            color: #343434;
            font-size: 25px;
            width: 110px;
            text-align: center;
            border-radius: 10px;
            background-color: @gabelBgColor;
          }
        }

        .savingsPlan-item-count {
          text-align: right;
          .savingsPlan-item-count-ed{
            font-size: 22px;
            color: @garyFontColor;
          }
        }
      }

      .savingsPlan-item-b{
        display: flex;
        font-size: 25px;
        color: @garyFontColor;

        .savingsPlan-item-rule{
          padding: 1px 6px;
          margin-right: 10px;
          border: 1px solid rgb(169, 169, 169);
          border-radius: 12px;
        }

        .rule-active{
          color: #343434;
          background-color: @gabelBgColor;
        }
      }
    }
  }
}
</style>